import Vue from 'vue'
import axios from './plugins/axios'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入vuex
import store from './store/index.js';

import router from './router.js'
import { Message } from 'element-ui';

// 添加全局loading配置
let loading = null;
// 用于处理用户点击多次即有多个请求的情况
let requestCount = 0;

// 显示loading
function showLoading() {
  if (requestCount === 0) {
    loading = Message({
      message: '加载中...',
      type: 'info',
      duration: 0,
      showClose: true,
    });
  }
  requestCount++;
}
//  隐藏loading
function hideLoading() {
  if (requestCount > 0) {
    requestCount--;
  }
  // 如果没有请求了，关闭loading
  if (loading && requestCount === 0) {
    loading.close();
  }
}



// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // console.log('config', config);
  let token = window.sessionStorage.getItem('token');
  // console.log('请求拦截器中的token：', token);

  // 添加headrer头的token
  if (config.token === true) {
    // 确保 token 是字符串，没有被 JSON.stringify
    if (token && token.startsWith('"') && token.endsWith('"')) {
      token = JSON.parse(token);
    }
    config.headers['token'] = token;
    // 确保 token 被正确设置
    // console.log('设置后的请求头：', config.headers);
  }
  // 添加loading
  if (config.loading === true) {
    showLoading();
  }

  // 在发送请求之前做些什么
  return config;
}, (error) => {
  // 隐藏loading
  hideLoading();
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  // console.log('响应拦截器：成功');
  // 请求之后隐藏loading
  hideLoading();

  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, (err) => {
  // 全局错误提示
  try {
    if (typeof err === 'object' && err !== null && err.response && err.response.data && err.response.data.errorCode) {
      Message.error(err.response.data.msg);
    }
    // 失败后隐藏loading
    hideLoading();
  } catch (e) {
    // 忽略
  }
  // 对响应错误做点什么
  return Promise.reject(err);
});

// 引入拖拽排序
import VueDND from 'awe-dnd'
Vue.use(VueDND)


// 引入全局配置
import $conf from "./common/config/config";
Vue.prototype.$conf = $conf;

// 自定义指令，判断用户是否有权限访问某个页面，例如添加角色，判断某些用户是否有权限访问该页面
// 只需要在需要权限的元素上添加 v-auth="添加角色" 即可
Vue.directive('auth', {
  inserted(el, bind) {
    let user = window.sessionStorage.getItem('user');
    user = user ? JSON.parse(user) : {};
    if (!user.super) {
      // 如果是超级管理员，则不进行权限判断
      // 权限判断逻辑可在此处实现
      let rules = user.ruleName ? user.ruleName : [];
      let v = rules.find((item) => item === bind.value)
      // console.log(v);
      if (!v) {
        // 如果没有权限，则隐藏该元素
        el.parentNode.removeChild(el);
      }
    }

  }
})

// import { MessageBox } from 'element-ui'
// MessageBox.setDefaults({
//   distinguishCancelAndClose: true
// })

Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.$axios = axios;

router.onError((error) => {
  console.error('路由错误：', error);
});

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
